<template>
  <el-container>  
        <!-- 主体部分 -->
        <el-container>
            <!-- 左侧菜单 Aside -->
            
            <div class="main">
                
                <div v-show="this.switch">
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                    <el-form-item label="车牌号" prop="licenseplate">
                        <el-input
                        v-model="queryParams.licenseplate"
                        placeholder="请输入车牌号"
                        clearable
                        />
                    </el-form-item>
                    <el-form-item label="车类型" prop="vehicletype">
                        <el-select
                        v-model="queryParams.vehicletype"
                        placeholder="请选择车类型"
                        clearable
                        >
                            <el-option
                                v-for="option in vehicleTypes"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车主信息" prop="ownerinfo">
                        <el-input
                        v-model="queryParams.ownerinfo"
                        placeholder="请输入车主信息"
                        clearable
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        <el-button icon="el-icon-plus" size="mini" @click="addCar">车辆入库</el-button>
                        <el-button size="mini" @click="changeSwitch">停车记录</el-button>
                    </el-form-item>
                </el-form>
                <div class="div_table_sw">
                    <div class="div_card_sw" :key="p.vehicleid" v-for="(p) in form.slice((currentPage1 - 1) * pageSize1, currentPage1 * pageSize1)">
                        <div class="table_picture_sw" >
                            <img style="width: 90%;  object-fit: cover; border-radius: 12px; margin: 1px;" src="../assets/car.png" alt="图">
                        </div>
                        <div class="tables_info_sw">
                            <div class="title22">
                            <table style="font-size:14px;border-collapse:separate; border-spacing:0px 8px; margin-top: 5%;">
                                <tr>
                                <td style="width:40%;padding-left: 0.5em;">车牌号码：</td>
                                <td style="width:60%;">{{p.licenseplate}}</td>
                                </tr>
                                <tr>
                                <td style="width:40%;padding-left: 0.5em; ">车辆类型：</td>
                                <td style="width:60%; ">{{vehicleTypeLabel(p.vehicletype)}}</td>
                                </tr>
                                <tr>
                                <td style="width:40%;padding-left: 0.5em;">车主信息：</td>
                                <td style="width:60%;">{{p.ownerinfo}}</td>
                                </tr>
                                <tr>
                                    <td><el-button type="text" icon="el-icon-edit" size="mini" @click="editCar(p)">修改</el-button></td>
                                    <td><el-button type="text" icon="el-icon-key" size="mini" @click="deleteCar(p.vehicleid)">出库</el-button></td>
                                </tr>
                            </table>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <el-col>
                    <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="form.length"
                    @current-change="handleCurrentChange1"
                    >
                    </el-pagination>
                </el-col>
                </div>
                <div style="text-align: center;" v-show="!this.switch">
                    <el-form :model="queryParams2" ref="queryForm" size="small" :inline="true" label-width="68px">
                    <el-form-item label="车位" prop="spaceid">
                        <el-input
                        v-model="queryParams2.spaceid"
                        placeholder="请输入车位"
                        clearable
                        />
                    </el-form-item>
                    <el-form-item label="车辆">
                        <el-select v-model="queryParams2.vehicleid" clearable filterable  style="width: 100%;" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.vehicleid"
                            :label="item.licenseplate"
                            :value="item.vehicleid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-date-picker
                        v-model="queryParams2.starttime"
                        type="datetime"
                        placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker
                        v-model="queryParams2.endtime"
                        type="datetime"
                        placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery2">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        <el-button icon="el-icon-plus" size="mini" @click="addRecord">新建记录</el-button>
                        <el-button size="mini" @click="changeSwitch">车辆记录</el-button>
                    </el-form-item>
                    <el-table
                        :data="form2.slice((currentPage2 - 1) * pageSize2, currentPage2 * pageSize2)"
                        style="width: 100%;margin-left: 10%">
                        <el-table-column
                            prop="recordid"
                            label="id"
                            width="80">
                        </el-table-column>
                        <el-table-column
                            prop="spaceid"
                            label="车库"
                            width="150">
                        </el-table-column>
                        <el-table-column
                            prop="vehicleinfo.licenseplate"
                            label="车辆"
                            width="150">
                        </el-table-column>
                        <el-table-column
                            prop="starttime"
                            label="开始时间"
                            width="310">
                        </el-table-column>
                        <el-table-column
                            prop="endtime"
                            label="结束时间"
                            width="310">
                        </el-table-column>
                        <el-table-column
                            prop="fee"
                            label="费用￥"
                            width="150">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="text" size="small" @click="editItem(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="deleteItem(scope.row.recordid)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="form2.length"
                    @current-change="handleCurrentChange2"
                    >
                    </el-pagination>
                </el-form>
                </div>
            </div>
            <el-dialog :visible.sync="showDialog" width="30%" :title="dialogTitle">
                <el-form label-width="80px" :model="dialogContext" >
                    <el-form-item label="车牌号码">
                        <el-input v-model="dialogContext.licenseplate"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆类型">
                        <el-select
                        
                        v-model="dialogContext.vehicletype"
                        placeholder="请选择车类型"
                        clearable
                        >
                            <el-option
                                v-for="option in vehicleTypes"
                                :key="option.value"
                                :label="option.label"
                                :value="option.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车主信息">
                        <el-input v-model="dialogContext.ownerinfo"></el-input>
                    </el-form-item>
                    <el-button-group style="margin-top: 1%;">
                        <el-button type="primary" icon="el-icon-goods" @click="messageCommit">提交</el-button>
                        <el-button type="primary" icon="el-icon-shopping-cart-2" @click="cancel">取消</el-button>
                    </el-button-group>
                </el-form>
            </el-dialog>

            <el-dialog :visible.sync="showDialog2" width="30%" :title="dialogTitle">
                <el-form label-width="80px" :model="dialogContext" >
                    <el-form-item label="车位">
                        <el-input v-model="dialogContext.spaceid"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆">
                        <el-select v-model="dialogContext.vehicleid" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.vehicleid"
                            :label="item.licenseplate"
                            :value="item.vehicleid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-date-picker
                        v-model="dialogContext.starttime"
                        type="datetime"
                        placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker
                        v-model="dialogContext.endtime"
                        type="datetime"
                        placeholder="选择日期时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="费用">
                        <el-input v-model="dialogContext.fee"></el-input>
                    </el-form-item>
                    <el-button-group style="margin-top: 1%;">
                        <el-button type="primary" icon="el-icon-goods" @click="messageCommit2">提交</el-button>
                        <el-button type="primary" icon="el-icon-shopping-cart-2" @click="cancel">取消</el-button>
                    </el-button-group>
                </el-form>
            </el-dialog>

        </el-container>
    </el-container>   
</template>
<script>

import {vehicleinfoList, vehicleinfoEdit, vehicleinfoDelete, vehicleinfoAdd} from "@/api/vehicleinfo/index.js"
import {parkingrecordList, parkingrecordEdit, parkingrecordDelete, getCar, parkingrecordAdd} from "@/api/parkingrecord.js"
//import NavMenu from "@/components/NavMenu.vue";
export default {
    name: "VehicleInfo",
    components: {
        //NavMenu,
    },
    data() {
        return {
            showDialog: false,
            showDialog2: false,
            currentPage1:'1',
            pageSize1: '12',
            currentPage2:'1',
            pageSize2: '10',
            options: [],
            form:[],
            form2:[],
            dialogTitle: '',
            dialogContext:{},
            switch: true,
            queryParams:{},
            queryParams2:{},
            vehicleTypes: [
                { label: '小型车', value: 'small' },
                { label: '中型车', value: 'medium' },
                { label: '客车', value: 'large' },
            ],

        };
    },
    methods: {
        // 跳转到对应路由
        navigateTo(routeName) {
            this.$router.push({ name: routeName }).catch(err => {
                if (err.name !== 'NavigationDuplicated') {
                    throw err;
                }
            });
        },

        handleCurrentChange1(currentPage1) {
            this.currentPage1 = currentPage1; 
        },

        handleCurrentChange2(currentPage2) {
            this.currentPage2 = currentPage2; 
        },

        getListVehicleinfo(){
            this.dialogContext = {}
            vehicleinfoList(this.queryParams).then(response => {
                this.form = response;
            });
        },

        getListParkingrecord(){
            parkingrecordList(this.queryParams2).then(response => {
                console.log(response)
                this.form2 = response;
            });
        },

        handleQuery() {
            this.getListVehicleinfo();
        },
        handleQuery2(){
            this.getListParkingrecord();
        },

        resetQuery(){
            this.queryParams = {},
            this.queryParams2 = {},
            this.getListVehicleinfo();
            this.getListParkingrecord();
        },
        deleteCar(id){
            vehicleinfoDelete(id).then(response => {
                if(response == "success"){
                    this.$notify({
                        title: '删除成功',
                        message: '数据成功删除',
                        type: 'success'
                    });
                    this.showDialog = false;
                    this.getListVehicleinfo();
                }else{
                    this.$notify.error({
                        title: '删除失败',
                        message: '数据删除失败',
                    });
                }
            });
        },

        deleteItem(id){
            parkingrecordDelete(id).then(response => {
                if(response == "success"){
                    this.$notify({
                        title: '删除成功',
                        message: '数据成功删除',
                        type: 'success'
                    });
                    this.showDialog2 = false;
                    this.getListParkingrecord();
                }else{
                    this.$notify.error({
                        title: '删除失败',
                        message: '数据删除失败',
                    });
                }
            });
        },

        editItem(p){
            this.showDialog2 = true;
            this.dialogContext = p;
            this.dialogTitle = '修改信息';
        },

        editCar(p){
            this.showDialog = true;
            this.dialogTitle = '修改信息';
            this.dialogContext = p;
        },
        
        addCar(){
            this.showDialog = true;
            this.dialogTitle = '添加信息';
        },

        addRecord(){
            this.showDialog2 = true;
            this.dialogTitle = '添加信息';
        },

        messageCommit(){
            if(this.dialogContext.vehicleid != '' && this.dialogContext.vehicleid != null){
                vehicleinfoEdit(this.dialogContext).then(response => {
                    if(response == "success"){
                        this.$notify({
                            title: '修改成功',
                            message: '数据成功上传',
                            type: 'success'
                        });
                        this.showDialog = false;
                        this.getListVehicleinfo();
                    }else{
                        this.$notify.error({
                            title: '修改失败',
                            message: '数据上传失败',
                        });
                    }
                    
                });
            }else {
                console.log(this.dialogContext)
                vehicleinfoAdd(this.dialogContext).then(response => {
                    if(response == "success"){
                        this.$notify({
                            title: '添加成功',
                            message: '数据成功上传',
                            type: 'success'
                        });
                        this.showDialog = false;
                        this.getListVehicleinfo();
                    }else{
                        this.$notify.error({
                            title: '添加失败',
                            message: '数据上传失败',
                        });
                    }
                });
            }
        },

        messageCommit2(){
            if(this.dialogContext.recordid != '' && this.dialogContext.recordid != null){
                parkingrecordEdit(this.dialogContext).then(response => {
                    if(response == "success"){
                        this.$notify({
                            title: '修改成功',
                            message: '数据成功上传',
                            type: 'success'
                        });
                        this.showDialog2 = false;
                        this.getListParkingrecord();
                    }else{
                        this.$notify.error({
                            title: '修改失败',
                            message: '数据上传失败',
                        });
                    }
                    
                });
            }else {
                console.log(this.dialogContext)
                parkingrecordAdd(this.dialogContext).then(response => {
                    if(response == "success"){
                        this.$notify({
                            title: '添加成功',
                            message: '数据成功上传',
                            type: 'success'
                        });
                        this.showDialog2 = false;
                        this.getListParkingrecord();
                    }else{
                        this.$notify.error({
                            title: '添加失败',
                            message: '数据上传失败',
                        });
                    }
                });
            }
            
        },

        vehicleTypeLabel(type) {
            const selectedOption = this.vehicleTypes.find(option => option.value === type);
            return selectedOption ? selectedOption.label : '未知类型';
        },
        cancel(){
            this.showDialog = false;
            this.showDialog2 = false;
            this.dialogContext = {}
        },

        changeSwitch(){
            this.switch = !this.switch
        }
    },
    created(){
        this.getListVehicleinfo();
        this.getListParkingrecord();
        getCar().then(response => {
            this.options = response
        });
    },

};
</script>
<style scoped>
/* 样式定义 */
.header {
    background-color: rgb(255, 255, 255);
    color: black;
    text-align: center;
    font-size: 2vw;
    line-height: 60px;
    position: fixed;
    /* 固定定位 */
    top: 50px;
    /* 距离顶部0像素 */
    width: 100%;
    /* 宽度占满 */
    z-index: 990;
    /* 确保在其他元素之上 */

}

.aside {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    position: fixed;
    /* 固定定位 */
    top: 60px;
    /* 距离顶部60像素，考虑header的高度 */
    left: 0;
    /* 紧贴左侧 */
    height: calc(100% - 60px);
    /* 高度占满视口，减去header的高度 */
    overflow-y: auto;
    /* 如果内容过多则允许垂直滚动 */
    z-index: 999;
    /* 确保在main内容之上 */
}

.main {
    /* background-color: #fcfcfc; */
    color: #333;
    width: 100%;
    padding: 20px;
    padding-top: 100px;
    /* 给顶栏高度留出空间 */
    margin-left: 200px;
    /* 给aside留出空间，200px为aside宽度 */
}


.footer {
    background-color: #7d7e7f;
    color: #333;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
    /* 圆角 */
    padding: 10px;
    z-index: 1001;
    /* 内边 */
}
.buttons-container {
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: flex-end;
    /* 右对齐 */

    margin: 10px;
}
/* 显示数据中的like */
.like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
}
/* 进度条大小 */
.demo-progress .el-progress--line {
    margin-bottom: 15px;
    max-width: 100%;
}

.div_table_sw {
      width: 100%;
      height: 95%;
  }

  .div_card_sw {
    margin: 2px;
    width: 23%;
    height: auto;
    margin-top: 0.3%;
    float: left;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(220, 222, 226);
    border-radius: 12px;
    position: relative;
  }
  .title22 {
    margin-top: 0%;
    height: 95%;
    width: 100%;
    font-size: 13px;
    color: black;
  }

  .table_picture_sw {
      width: 45%;
      height: 189px;
      float: left;
      display: flex;
      padding-left: 0;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-top: 0%;
  }

  .title_sw {
      margin-top: 0%;
      height: 15%;
      width: 100%;
      text-align: center;
      font-size: 20px;
      line-height: 2;
      border-radius: 5px 5px 0 0;
  }
</style>